<template>
   <div>
       <el-card>
        <!-- 
            搜索框区域
            el-form:ElementUI的表单组件
            el-form-item:ElementUI的表单项组件

         -->
         <el-form :inline="true">
            <el-form-item label="类型">
                <el-select v-model="query.type">
                    <el-option label="姓名" value="name"></el-option>
                    <el-option label="性别" value="gender"></el-option>
                    <el-option label="电话" value="phone"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="值">
                <el-select v-model="query.value" v-if="isSelectGender">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
                <el-input placeholder="请输入值" v-model="query.value" v-else></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="getStudent">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="openAddDailog">增加学生</el-button>

            </el-form-item>

         </el-form>
        
         <!--
            el-table是ElementUI中表格组件，常见的属性如下
            data:显示的数据
            el-table-column是ElementUI中表格列表，常见的属性如下所示
            label:显示的标题
            prop:对应的列字段的字段名
         -->
         <el-table :data="students">
            <el-table-column label="编号" prop="_id"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="性别" prop="gender"></el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
            <el-table-column label="头像" prop="image">
                <template slot-scope="scope">
                    <el-avatar :src="scope.row.image" shape="square"></el-avatar>
                </template>
            </el-table-column>
             <el-table-column label="专业" prop="subjectsId">
                <template slot-scope="scope">
                    {{scope.row.subjectsId.name}}
                </template>
             </el-table-column>
             <el-table-column label="班级" prop="classesId">
                <template slot-scope="scope">
                    {{scope.row.classesId.name}}
                </template>
             </el-table-column>

             <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" circle  icon="el-icon-s-tools"></el-button>
                    <el-button type="danger" circle  icon="el-icon-delete"></el-button>
                    <el-button type="warning" circle  icon="el-icon-edit"></el-button>
                </template>
             </el-table-column>
         </el-table>
         <!-- 
            el-pagination用来完成分页操作，常用的属性如下
            page-size：规定每页要显示的记录数
            total:总记录
            background:设置分页按钮是否有背景色
            current-change:当currentPage页发生变化的时候会被触发
            page-sizes:每页显示个数选择器的选项设置
          -->
          <el-pagination
            :page-sizes="[5,10,15,20]"
            :page-size="query.pageSize"
            :total="total"
            background
            layout="sizes,prev,pager,next,jumper,->,total"
            @current-change="currentPageHanle"
            @size-change="sizeChangeHanle">
          </el-pagination>
       </el-card>
       <!-- 增加学生的模态框 -->
       <el-dialog :visible.sync="visiableAddDialog" title="增加学生">
          <el-form label-width="60px">
            <el-form-item label="姓名">
                <el-input v-model="student.name"></el-input>
            </el-form-item>
             <el-form-item label="年龄">
                <el-input v-model="student.age"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="student.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item  label="专业">
                <el-col :span="8">
                    <el-form-item>
                        <el-select v-model="student.subjectsId">
                            <el-option 
                                v-for="subject in subjectsList" 
                                :key="subject._id"
                                :label="subject.name"
                                :value="subject._id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="班级">
                        <el-select v-model="student.classesId">
                            <el-option 
                                v-for="classes in classesList" 
                                :key="classes._id"
                                :label="classes.name"
                                :value="classes._id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="头像">
                <!-- 
                    el-upload的标签是用来是西安element-ui的文件上传的，常见的属性
                    action:必选参数，上传的地址
                    before-upload:上传之前触发的钩子
                    on-success:文件上传成功的钩子
                 -->
                 <el-upload 
                    action="http://www.zhaijizhe.cn:3005/upload/uploadImage"
                    :before-upload="beforeUploadHandle"
                    name="avatar"
                    :on-success="handleAvatarSuccess"
                    class="avatar-uploader">
                     <img :src="student.image" alt="" class="avatar" v-if="student.image">
                     <i class="el-icon-plus avatar-uploader-icon" v-else></i>
                 </el-upload>
            </el-form-item>

          </el-form>
       </el-dialog>

   </div>
</template>

<script>
export default {
    data(){
        return{
          students:[],
          total:0,
          query:{
            type:'',
            value:'',
            pageSize:5,
            currentPage:1
          },
          isSelectGender:false,
          visiableAddDialog:false,
          student:{
            name:'',
            age:'',
            gender:"男",
            subjectsId:'',
            classesId:'',
            image:''
          },
          subjectsList:[],
          classesList:[]
        }
    },
    methods:{
        async getStudent(){
            const result=await this.$api.student.getStudentsApi(this.query)
            console.log(result.data);
            this.students=result.data.result
            this.total=result.data.total //获取到后端返回来的total，然后赋值给data中total
        },
        currentPageHanle(arg){
           this.query.currentPage=arg
           this.getStudent()
        },
        //如果每页的记录数发生变化的时候会触发
        sizeChangeHanle(arg){
            this.query.pageSize=arg
            this.getStudent()
        },
        openAddDailog(){
            this.visiableAddDialog=true
        },
        //查询专业
        async getSubjects(){
            const result=await this.$api.subjects.getSubjectsApi()
            this.subjectsList=result.data.result
        },
        beforeUploadHandle(file){
            const isJPG=file.type=="image/jpeg"
            const isLt2M=file.size/1024/1024<=2
            if(!isJPG){
                this.$message.error('您上传的文件不是JPG')
            }
            if(!isLt2M){
                this.$message.error('您上传的文件不是JPG')
            }
            return isJPG&&isLt2M
        },
        handleAvatarSuccess(response){
          this.student.image=`http://www.zhaijizhe.cn:3005${response.avatarPath}`
        }
    },
    watch:{
        'query.type':{
            handler(newval){
               this.query.value=''
               if(newval=='name'||newval=="phone"){
                this.isSelectGender=false
               }else if(newval=='gender'){
                this.isSelectGender=true
               }
            }
        },
        async 'student.subjectsId'(newval){
             this.student.classesId=""
             const result=await this.$api.classes.getClassesBySubjectsId(newval)
             this.classesList=result.data.result
        }
    },
    created(){
        this.getStudent()
        this.getSubjects()
    }
}
</script>

<style scoped>
    .avatar-uploader>>> .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader>>> .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
     .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>